<template>
    <div class="center_div">

        <el-tabs v-model="activeName" @tab-click="handleClick" style="width: 100%;margin-top: 20px;">
            <el-tab-pane label="共享平台" name="共享平台">
                <div>
                    <el-upload
                        class="upload-demo"
                        ref="upload"
                        action="/fileupload"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :on-success="handleSuccess"
                        :file-list="fileList"
                        :auto-upload="false"
                        :data="{username}"
                    >
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                    <!-- <el-button size="small" type="primary" @click="selectFile">选择文件</el-button>
                    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
                </div>
                <el-table :data="allDisk" v-loading="tableLoading" element-loading-text="Loading">
                    <el-table-column prop="employeename" label="上传者" min-width="90"></el-table-column>
                    <el-table-column prop="thetime" label="上传时间" min-width="90"></el-table-column>
                    <el-table-column prop="filerealname" label="文件名" min-width="90"></el-table-column>
                    <el-table-column label="操作" min-width="150" align="center">
                        <template slot-scope="scope">
                            <el-button type="success" @click="downloadDisk(scope.row.fileid)">下载</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="我上传的文件" name="我上传的文件">
                <el-table :data="myDIsk" v-loading="tableLoading" element-loading-text="Loading">
                    <el-table-column prop="employeename" label="上传者" min-width="90"></el-table-column>
                    <el-table-column prop="thetime" label="上传时间" min-width="90"></el-table-column>
                    <el-table-column prop="filerealname" label="文件名" min-width="90"></el-table-column>
                    <el-table-column label="操作" min-width="150" align="center">
                        <template slot-scope="scope">
                            <el-button type="success" @click="downloadDisk(scope.row.fileid)">下载</el-button>
                            <el-button type="danger" @click="delDisk(scope.row.fileid)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                activeName: '共享平台',
                allDisk: [
                    // {fileid: 1,employeename: '王小五',employeeid: 1,thetime: '2020-01-02 11:11:11',filerealname: 'myself.png'},
                    // {fileid: 2,employeename: '李大二',employeeid: 2,thetime: '2020-01-02 11:11:11',filerealname: 'myself.png'},
                    // {fileid: 3,employeename: '杜小满',employeeid: 3,thetime: '2020-01-02 11:11:11',filerealname: 'myself.png'},
                    // {fileid: 4,employeename: '杜小满',employeeid: 3,thetime: '2020-01-02 11:11:11',filerealname: 'myself.png'},
                    // {fileid: 5,employeename: '李大二',employeeid: 2,thetime: '2020-01-02 11:11:11',filerealname: 'myself.png'},
                    // {fileid: 6,employeename: '王小五',employeeid: 1,thetime: '2020-01-02 11:11:11',filerealname: 'myself.png'}
                ],
                myDIsk: [
                    // {fileid: 1,employeename: '王小五',employeeid: 1,thetime: '2020-01-02 11:11:11',filerealname: 'myself.png'},
                    // {fileid: 2,employeename: '王小五',employeeid: 2,thetime: '2020-01-02 11:11:11',filerealname: 'myself.png'},
                    // {fileid: 3,employeename: '王小五',employeeid: 3,thetime: '2020-01-02 11:11:11',filerealname: 'myself.png'},
                    // {fileid: 4,employeename: '王小五',employeeid: 3,thetime: '2020-01-02 11:11:11',filerealname: 'myself.png'},
                    // {fileid: 5,employeename: '王小五',employeeid: 2,thetime: '2020-01-02 11:11:11',filerealname: 'myself.png'},
                    // {fileid: 6,employeename: '王小五',employeeid: 1,thetime: '2020-01-02 11:11:11',filerealname: 'myself.png'}
                ],
                fileList: [
                ],
                tableLoading: false,
                username: '',
                employeename:  this.$store.state.user.user.employeename
            }
        },
        async created() {
            this.username = localStorage.getItem('username')
            await this.fetchDisk()
        },
        methods: {
            handleSuccess(res) {
                let {code, data, msg} = res
                if(code === 200) {
                    data = data.files
                    this.myDIsk = []
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].employeename === this.employeename) {
                            this.myDIsk.push(data[i])
                        }
                    }
                    this.allDisk = data

                    this.$formatDateForObjectInArray(this,['allDisk','myDIsk'],['thetime'])
                    this.$message.success("上传文件成功")
                } else {
                    this.$message.error(msg)
                }
            },
            submitUpload() {
                // console.log(this.$refs.upload.$refs['upload-inner'].fileList)
                this.$refs.upload.submit();
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            async fetchDisk(){
                this.tableLoading = true
                let {code ,data ,msg} = await this.$post('/filecloud')
                data = data.files
                if(code === 200) {
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].employeename === this.employeename) {
                            this.myDIsk.push(data[i])
                        }
                    }
                    this.allDisk = data

                    this.$formatDateForObjectInArray(this,['allDisk','myDIsk'],['thetime'])

                }else {
                    this.$message.error(msg)
                }
                this.tableLoading = false
            },
            handleClick(key){
                console.log(key)
            },
            async delDisk(id) {
                await this.delDiskFile(id)
            },
            async downloadDisk(id) {
                const res = await this.$post('/filedown',{
                    data:{id}
                },{responseType: 'blob'})
                console.log(res)
                let filename = this.allDisk.find(item => item.fileid === id).filerealname
                let dom = document.createElement('a')
                let url = window.URL.createObjectURL(res)
                dom.href = url
                dom.download = decodeURI(filename)
                dom.style.display = 'none'
                document.body.appendChild(dom)
                dom.click()
                dom.parentNode.removeChild(dom)
                window.URL.revokeObjectURL(url)
                
            },
            selectFile() {
               //选择文件
            //    new File
            },
            // submitUpload() {
            //     //上传代码
            // },
            async delDiskFile(id){
                let {code ,msg} = await this.$post('/filedeletedo', {
                    data: {id}
                })
                if(code === 200) {
                    this.allDisk.splice(this.allDisk.findIndex(item => item.fileid === id),1)
                    this.myDIsk.splice(this.myDIsk.findIndex(item => item.fileid === id),1)
                    this.$message({
                        message: '成功删除文件',
                        type: 'success'
                    })
                }else {
                    this.$message.error('发生错误： ' + msg)
                }
            }
        }

    }
</script>

<style>
    .center_div{
        width: 60%;
        margin:0 auto;
        margin-bottom: 50px;
    }
</style>